import { debounce } from '@/utils'
export default {
  data() {
    return {
      sidebarElement: null,
      echartsResizeHandle: null
    }
  },
  mounted() {
    // Echarts缩放防抖
    this.echartsResizeHandle = debounce(() => {
      if (this.chart) {
        this.chart.resize()
      }
    }, 100)
    // 初始echarts化缩放事件
    this.initResizeEvent()
    // 初始化sidebar动画完成事件
    this.initSidebarResizeEvent()
  },
  beforeDestroy() {
    this.destroyResizeEvent()
    this.destroySidebarResizeEvent()
  },
  // keep-alive
  activated() {
    this.initResizeEvent()
    this.initSidebarResizeEvent()
  },
  deactivated() {
    this.destroyResizeEvent()
    this.destroySidebarResizeEvent()
  },
  methods: {
    initResizeEvent() {
      window.addEventListener('resize', this.echartsResizeHandle)
    },
    destroyResizeEvent() {
      window.removeEventListener('resize', this.echartsResizeHandle)
    },
    sidebarResizeHandler(e) {
      if (e.propertyName === 'width') {
        this.echartsResizeHandle()
      }
    },
    initSidebarResizeEvent() {
      this.sidebarElement = document.getElementsByClassName('sidebar-container')[0]
      this.sidebarElement && this.sidebarElement.addEventListener('transitionend', this.sidebarResizeHandler)
    },
    destroySidebarResizeEvent() {
      this.sidebarElement && this.sidebarElement.removeEventListener('transitionend', this.sidebarResizeHandler)
    }
  }
}
